<template>

  <div class="w600 itembox">
    <div class="front">
      <el-row class="title">
        <el-col :span="10" style="display: flex">
          <span class="t-before">{{ section }}</span>
          <span class="t-after">{{ title }}</span>
        </el-col>
        <!--            倒计时组件-->
        <el-col :span="3" :offset="1" style=" display: flex;text-align: center">
          <span>00:05:30</span>
        </el-col>
        <!--按钮，根据状态显示与否-->
        <el-col :span="10" style="margin: auto 0;">
          <button class="button " style="float: right"> 返回题库列表</button>
          <button class="button " style="float: right"> 写作练习</button>
          <button class="button " style="float: right" @click="reloadAll"> 重置 </button>
        </el-col>
      </el-row>
    </div>
    <div class="testbox">
      <TextSelection v-if="isRouterAlive"></TextSelection>
    </div>
  </div>

</template>

<script>
import rangy from 'rangy'
import 'rangy/lib/rangy-core'
import 'rangy/lib/rangy-classapplier'
import TextSelection from "./TextSelection";

export default {
  name: "Answerarea",

  components: {TextSelection},
  provide:function(){
    return {
      reloadAll: this.reloadAll
    }
  },
  data() {
    return {
      section: " SSA",
      title: "01Js+v(主语+不及物动词)",
      isRouterAlive:true
    }

  },
  methods:{
    reloadAll() {
      this.isRouterAlive = false
      this.$nextTick(() => {
        this.isRouterAlive = true
      })
    }
  }




}

</script>
<style></style>
<style scoped>

.itembox {
  background-color: white;
  width: 100%;
  height: 570px;
  padding: 30px;
}

.title {
  padding: 0;
  border: 1px solid #f0f1f6;
  height: 30px;
  line-height: 30px;
  margin-bottom: 20px;
  display: flex;

}

.testbox {
  height: calc(570px - 30px - 60px);
  text-align: center;
  margin-top: 10px;
  padding: 20px;
  border: 1px solid #999999;
}

.t-before {
  display: block;
  height: 30px;
  line-height: 30px;
  background-color: #f0f1f6;
  width: 100px;
  text-align: center;
}

.t-after {
  width: fit-content;
  padding-left: 20px;
  text-align: center;

}




</style>
